import { DirectiveBinding } from 'vue'
const moveDirective = {
  mounted: (el: HTMLElement, bind: DirectiveBinding) => {
    savefun = bind
    gEl = el
    el.addEventListener('touchstart', FnStart)
    el.addEventListener('touchend', FnEnd)
    el.addEventListener('touchmove', FnMove)
  },
  beforeUnmount: (el: HTMLImageElement) => {
    el.removeEventListener('touchstart', FnStart)
    el.removeEventListener('touchend', FnEnd)
  }
}
let start = 0
let end = 0
let savefun: DirectiveBinding
let gEl: HTMLElement
const FnStart = (e: TouchEvent) => {
  start = e.changedTouches[0].clientX
}
const FnMove = (e: TouchEvent) => {
  end = e.changedTouches[0].clientX
  const move = end - start
  gEl.style.left = move <= 0 ? '0' : move + 'px'
}
const FnEnd = (e: TouchEvent) => {
  end = e.changedTouches[0].clientX
  if (end - start > 50) {
    savefun.value()
  } else {
    gEl.style.left = '0'
  }
  start = 0
  end = 0
  setTimeout(() => {
    gEl.style.left = '0'
  }, 400)
}
export default moveDirective
